---
comments: false
---
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
  <title>字帖</title>
  <script src="leancloud.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jsencrypt/3.0.0/jsencrypt.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/leancloud-storage/dist/av-min.js"></script>
  <link rel="stylesheet" href="loading.css">
  <link rel="stylesheet" href="leancloud.css">

  <style>
    .poem-container {
      display: flex;
      align-items: center;
    }
    .image-wrapper {
      margin-top: 10px;
      width: 70px; /* Set the width of the image container */
      height: 100px; /* Set the height of the image container */
      overflow: hidden; /* Hide any overflowing content */
    }
    #backButton {
          background-image: url('images/back.png');
          width: 20px;
          height: 20px;
          background-size: cover;
          cursor: pointer;
          /* background-color: #666; */
      }
  </style>
</head>
<body>

  <div id="backButton" ></div>
      <main class="main">
        <div id="search">
            <form class="search-form" action="javascript:return true" autocomplete="off" onsubmit="return false;">
                <div class="search-input">
                    <input maxlength="80" type="search" class="search-input" id="search-input" placeholder="请输入关键字..." required="">
                </div>
            </form>
        </div>
    </main>
  
  <!-- 加载动画 -->
  <div class="loading">
    <div></div>
    <div></div>
    <div></div>
  </div>
  
    <div class="data">
      <h6 id="count"></h6>
      <div id="poem-list"></div>
        <div id="pagination">
          <div id="buttonContainer">
            <div id="moreButton"></div>
          </div>
      </div>
    </div>
  <script>

    localStorage.removeItem('searchZitieKeyword', "");
    var elements = document.querySelector('.post-title__text');
    elements.textContent = '字帖'

    var postTitle = document.querySelector('.post-title');
    postTitle.style.display = 'none';
    var headeRight = document.querySelector('.header__right');
    headeRight.style.display = 'none';
    var headeLeft = document.querySelector('.header__left');
    headeLeft.style.display = 'none';
    
  
     var currentPage = 1;
    var pageSize = 10; // 每页显示的条目数
    var key = ""
    initLeanCloud()
   
    requestKey(handleData2)

    function handleData2(data) {
      data.forEach(function (object) {
        key = object.get('name')
        var keyword = ""
       
        requestZitie(currentPage,pageSize,'',handleData)
      })
    }
    const encrypt = new JSEncrypt();

    
    const query = new AV.Query("zitie_pdf");
    query.count().then((count) => {
      var elements = document.getElementById('count');
      elements.textContent = '目前已收录' + count + '本'
    });

    var img = document.getElementById('moreButton');
    img.addEventListener('click', function() {
      currentPage++;
      var keyword = localStorage.getItem('searchZitieKeyword');
      if (keyword == null) {
        keyword = ""
      }
      console.log('keyword:',keyword);
      requestZitie(currentPage,pageSize,keyword,handleData)
    });

    function handleData() {
      console.log('获取到的数据为：');
      // 在这里处理获取到的数据，例如更新页面内容等
      var data = document.querySelector('.data');
      var loading = document.querySelector('.loading');
      loading.style.display = 'none'; // 隐藏loading动画
      data.style.opacity = 0.8; // 显示数据
       
    }
    // 监听搜索输入框
    document.addEventListener('DOMContentLoaded', function() {
      var inputElement = document.getElementById('search-input');
      inputElement.value = '';
      inputElement.addEventListener('input', function(event) {
        // 实时获取输入框中的内容
        var inputValue = inputElement.value;
        console.log('输入内容为: ' + inputValue);
        // localStorage.setItem('searchPoemKeyword', inputValue);
        // clean()
        // requestData(currentPage,pageSize,inputValue,handleData);
      });
      inputElement.addEventListener('keyup', function(event) {
        if (event.key === 'Enter') {
          // 用户按下了回车键，执行相应的操作
          console.log('用户按下了回车键');
          var inputValue = inputElement.value;
          console.log('搜索内容为：' + inputValue);

          localStorage.setItem('searchZitieKeyword', inputValue);
          clean()
          requestZitie(currentPage,pageSize,inputValue,handleData);
          // 在这里添加你想要执行的操作
        }
      });
    });
    var img = document.getElementById('backButton');
        img.addEventListener('click', function () {
            window.history.back()
       });
  </script>
</body>
</html>